.header {
  width: 100%;
  background-color: #ffffff;
  margin-top: rem(64px);
  height: rem(47px);
  .header-top {
    position: fixed;
    width: 100%;
    display: flex;
    height: rem(40px);
    align-items: center;
    border-bottom: rem(1px) solid #e4e4e4;
    background: #ffffff;
    z-index: 70;
    .item {
      font-size: rem(13px);
      color: #2f2f2f;
      border-right: rem(1px) solid #dddddd;
      flex: 1;
      text-align: center;
      position: relative;
      &:last-child {
        border: none;
      }

      &.cate:after, &.type:after {
        content: '';
        display: inline-block;
        width: rem(5px);
        height: rem(5px);
        margin-bottom: rem(2px);
        margin-left: rem(6px);
        border: rem(1px) solid #666666;
        border-width: 0 rem(1px) rem(1px) 0;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transition: 0.3s;
        -webkit-transition: 0.3s;
      }

      &.filter:after {
        content: '';
        display: inline-block;
        width: rem(12px);
        height: rem(12px);
        transform: rotate(0);
        background-image: url("./img/filter.png");
        background-size: cover;
      }

      &.current:not(.filter):after {
        transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
      }

      &:before {
        display: none;
        content: '';
        position: absolute;
        top: rem(23px);
        left: 49%;
        width: rem(7px);
        height: rem(7px);
        background-color: #ffffff;
        border: rem(1px) solid #e4e4e4;
        border-width: 0 rem(1px) rem(1px) 0;
        transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
      }
      &.cate:before{
        background-color: #efefef;
      }
      &.current:before{
        display: none;
      }
    }
  }
  .panel{
    position: fixed;
    z-index: 7;
    left: 0;
    top: rem(105px);
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    &.show{
      display: block;
    }
    &.none{
      display: none;
    }
    .panel-inner{
      height: rem(250px);
      overflow-x: hidden;
      overflow-y: auto;
      background-color: #ffffff;
      ul{
        display: none;
        background-color: #ffffff;
        &.current{
          display: block;
        }
      }
      .cate-panel{
        .cate-item{
          .item-title{
            position: relative;
            font-size: rem(12px);
            height: rem(30px);
            background-color: #efefef;
            line-height: rem(30px);
            color: #666666;
            padding-left: rem(13px);
            &:before{
              content: '';
              position: absolute;
              display: block;
              margin-top: rem(8px);
              margin-left: rem(-13px);
              width: rem(2px);
              height: rem(16px);
              background-color: #ffd161;
            }

          }
        }
      }
      .type-panel{
        .type-item{
          border-bottom: rem(1px) solid #e9e9e9;
          height: rem(44px);
          font-size: rem(13px);
          color: #666666;
          line-height: rem(44px);
          padding-left: rem(20px);
          &.active{
            color: #ffb000;
          }
        }

      }
      .filter-panel{
        .filter-item{
          margin-bottom: rem(10px);
          margin-top: rem(5px);
          padding-left: rem(5px);
          padding-right: rem(5px);
          .filter-title{
            color: #999999;
            font-size: rem(12px);
            padding-left: rem(14px);
          }
        }
      }
      //统一样式
      .item-content{
        min-height: rem(20px);
        .cate-box{
          float: left;
          width: 33.3%;
          font-size: rem(12px);
          padding: rem(10px);
          box-sizing: border-box;
          .cate-box-inner{
            border: rem(1px) solid #c4c4c4;
            text-align: center;
            color: #666666;
            height: rem(30px);
            line-height: rem(30px);
            position: relative;
            &.active{
              background-color: #fffbf1;
              color: #ffb000;
              border-color: #ffb000;
            }
          }
          .has-icon img{
            display: block;
            width: rem(18px);
            height: rem(18px);
            position: absolute;
            top: rem(6px);
            left: rem(6px);
          }
        }
      }
    }
  }
}